// 短视频播放
document.querySelector('.video ul').onclick = function() {
    document.body.style.overflow = 'hidden'
    document.querySelector('.video-wrapper').style.display = 'block'
}
document.querySelector('.video-wrapper .close').onclick = function() {
    document.body.style.overflow = 'auto'
    document.querySelector('.video-wrapper').style.display = 'none'

    document.querySelector('.video-wrapper video').pause()
}
    
// ---------------



// JS- 追加图片
// JS - 更改图片位置
// 循环打印1-56
let cols = [
    {left:0, top: 0},
    {left:254, top: 0},
    {left:254*2, top: 0},
    {left:254*3, top: 0},
]
let videoHeight = 0

function Waterfall() 
{
    // 循环打印1-56
    for (let num = 1; num <= 56; num++) {
        // 循环里面造li标签 - 追加到页面即可
        let liObj = document.createElement('li')

        liObj.style.position = 'absolute'
        liObj.style.display = 'none'

        liObj.innerHTML = `
        <div>
            <img src="./assets/imgs2/${num}.jpg" alt="">
        </div>
        <span>${num}初秋絮语，用音乐记下你的点点滴滴</span>
        <p>
            <i class="iconfont icon-aixin"></i>${num}${num}.6w喜欢
        </p>
    `
        document.querySelector('.video ul').appendChild(liObj)

        // let cols = [
        //     {left:0, top: 10},
        //     {left:254, top: 8},
        //     {left:254*2, top: 10},
        //     {left:254*3, top: 10},
        // ]
        // 第一次  第一行第一个图片   
        // 第二次  第一行第二个图片
        // 第三次  第一行第三个图片
        // 第四次  第一行第四个图片
        // 第五次  第二行第二个图片 
        liObj.querySelector('img').onload = function() {
            let minHeightIndex = 0
            cols.forEach((item,i) => {
                if(cols[minHeightIndex].top > item.top)
                {
                    minHeightIndex = i
                }
            })
            liObj.style.display = 'block'
            liObj.style.left = cols[minHeightIndex].left + 'px'
            liObj.style.top = cols[minHeightIndex].top + 'px'
            cols[minHeightIndex].top += liObj.offsetHeight  
            // 留心：上面已经把图片加载到页面但是不以为着图片已经加载完毕 所以获取不到最新图片高度


            // 记录最后一个图片的top位置
            videoHeight = cols[minHeightIndex].top
        }
    }
}



// JS-无限滚动
// 1 监控滚动条变化
// 2 事件处理函数中 - 获取默认可见视口高度 + 滚动条滚动高度
// 3 事件处理函数中 - 判断    2>=最后一个图片的top 旧得重新生成追加图片
window.onscroll = function() {
    let clientHeight = window.innerHeight || document.documentElement.clientHeight
    let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop 

    if (clientHeight + scrollHeight >= videoHeight)
    {
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        
        Waterfall()
    }
}

window.addEventListener('load',Waterfall)

